<template>
	<view class="page">
		<view class="timeline">
			<u-time-line>
				<u-time-line-item v-for="(item, index) in data" :key="index" :class="{ on: index == 0 }" nodeTop="48">
					<template v-slot:node>
						<view class="dot"></view>
					</template>
					<template v-slot:content>
						<view class="item_content">
							<view class="title">{{ item.status_name }}</view>
							<view class="detail" v-if="item.status == 6">车辆：{{ item.car }}</view>
							<view class="detail" v-if="item.type">
								{{ item.status == 1 ? '下单方式' : item.status == 2 ? '采购方式' : item.status == 7 ? '签收方式' : '' }}：{{ item.type_list[item.type] }}
							</view>
							<view class="detail" v-if="item.status != 1 || (item.status == 1 && item.type != 1)">
								{{
									item.status == 1
										? '操作员'
										: item.status == 3
										? '库管员'
										: item.status == 4
										? '分拣员'
										: item.status == 5
										? '库管员'
										: item.status == 6
										? '司机'
										: item.status == 7
										? '操作员'
										: item.status == 2
										? item.type_list[item.type]
										: ''
								}}： {{ item.name }}
							</view>
							<view class="flexs" v-if="item.status==2 && item.type!=1">
								<view v-for="(lunbo,index) in item.img" :key="index" @click="previewImage(index,item)">
									<image :src="lunbo" mode="aspectFill"></image>
								</view>
							</view>
							<view class="detail">
								{{
									item.status == 1
										? '下单时间'
										: item.status == 2
										? '采购时间'
										: item.status == 3
										? '入库时间'
										: item.status == 4
										? '分拣时间'
										: item.status == 5
										? '出库时间'
										: item.status == 6
										? '送达时间'
										: item.status == 7
										? '签收时间'
										: ''
								}}： {{ item.time_v }}
							</view>

						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>
		<view class="nodata" v-if="data.length == 0">
			<image :src="nodataImg" mode="aspectFit"></image>
			<view>空空如也~</view>
		</view>
	</view>
</template>

<script>
	import {
		$https
	} from '@/static/js/request.js';
	export default {
		name: 'source',
		props: ['id'],
		data() {
			return {
				data: [],
				nodataImg: getApp().globalData.nodataImg
			};
		},
		created() {
			this.getData(this.id);
		},
		methods: {
			getData(id) {
				$https(
					'GETN',
					'traceDetail', {
						order_list_id: id
					},
					res => {
						if (res.data.errcode == 0) {
							let data = res.data.data.list;
							for (let index in data) {
								if (data[index].time > 0) {
									let time = data[index].time * 1000,
										date = new Date(time),
										year = date.getFullYear(),
										month = date.getMonth() + 1,
										day = date.getDate(),
										hours = date.getHours(),
										minites = date.getMinutes(),
										seconds = date.getSeconds();
									month = month > 9 ? month : '0' + month;
									day = day > 9 ? day : '0' + day;
									data[index].time_v = `${year}-${month}-${day} ${hours}:${minites}:${seconds}`;
								} else {
									data[index].time_v = '';
								}
							}
							this.data = data;
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					}, true
				);
			},
			previewImage(index, item) {
				let i = item.img; //获取当前页面的轮播图数据
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		background: #eff9f8;
	}

	.page {
		padding-left: 30rpx;

		.timeline {
			// margin: 0 54rpx 30rpx;
			// padding-left: 10rpx;
			// background: #F0F8F4;
			// border:1px solid #F0F0F0;
			position: relative;

			/deep/.u-time-axis-item {
				padding: 18rpx 0;
				font-size: 20rpx;
				color: #7e7e7e;
				margin-bottom: 10rpx;
			}

			/deep/.dot {
				width: 20rpx;
				height: 20rpx;
				background-color: #008035;
				border-radius: 10rpx;
				// background:#fff;
				// border:6rpx solid #DEDEDE;
			}

			.item_content {
				background-color: #ffffff;
				width: 533rpx;
				min-height: 134rpx;
				box-shadow: 0 2rpx 20rpx 0 rgba(12, 4, 7, 0.19);
				border-radius: 12rpx;
				padding: 22rpx 20rpx;

				.title {
					font-size: 32rpx;
					font-weight: 500;
					margin-bottom: 16rpx;
				}

				.detail {
					margin-bottom: 8rpx;
				}
			}

			/deep/.on {
				.dot {
					border-color: #008035;
				}

				&.u-time-axis-item::before {
					content: '';
					position: absolute;
					left: -42rpx;
					top: 12rpx;
					width: 0px;
					bottom: 0;
					border-left: 2px solid #4e9d84;
				}

				.title {
					color: #008035;
				}

				.detail {
					color: #333333;
				}
			}
		}
	}

	.flexs {
		display: flex;
		justify-content: space-around;
	}

	.flexs image {
		width: 150rpx;
		height: 150rpx;
	}
</style>
